<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<head>
  <meta charset="UTF-8">
  <title>奖项设置</title>
  <script src="/js/vue/vue.js"></script>

  <link rel="stylesheet" href="/js/elementui/index.css">
  <script src="/js/elementui/index.js"></script>
  <script src="/js/theme/FileSaver.js"></script>
  <script src="/js/theme/pptx/libs/jquery.min.js"></script>
  
  

  <link rel="stylesheet" href="/js/layer/layer.css" type="text/css">
  <script src="/js/layer/layer.js"></script>

  <link rel="stylesheet" href="/css/common.css">
  <script src="/js/common.js?t=20250804"></script>
  
  
  <script src="/js/cert/setting.js?t=20250804"></script>
  <script src="/js/base.data.info.js?t=20250804"></script>
  <script src="js/data.info.js?t=20250804"></script>

  <style>

    .step-box {
      /*line-height: 30px;*/
      /*height: 30px;*/
        width: 30%;
        /*margin-top: ;*/
        /*margin-left: 5px;*/
        /*margin-bottom: 10px;*/
    }
    .define-items > .el-tabs__header {width: 100%;}
    .el-form-item{margin-bottom: 10px !important;}
  </style>
</head>

<body>
<div id="app" class="my-app2">
  <div class="title">
    <span>奖项设置</span>
    <button onclick="history.back(-1)">返回</button>
  </div>

  <div class="content">

    <el-row >
      <el-col :span="2" >
        <div style="position: fixed;">
          <div style="margin-top: 10px;">
            <el-tabs v-model="selectedArea" tab-position="left" class="define-items" tabPosition="left" @tab-click="selectArea">
              <el-tab-pane v-for="(v,k) in areas" :label="v" :key="k" :name="k"></el-tab-pane>
            </el-tabs>
          </div>

        </div>
        <div style="width:10px;height:10px;"></div>

      </el-col>
      <el-col :span="20" style="padding-top: 10px;" >
        <el-row style="border-bottom: 1px solid;margin-bottom: 20px;text-align: center; ">
          <el-col :span="3">子项</el-col>
          <el-col :span="3">奖项比例</el-col>
          <el-col :span="4">奖项中文名</el-col>
          <el-col :span="4">奖项英文名</el-col>
          <el-col :span="6">排除项</el-col>
        </el-row>
        <el-form ref="form" :model="form" label-width="5px" size="small">
          <el-row v-for="t in types">
            <el-form-item >
              <div class="step-box">
                <span>{{t.name}}</span>
                <el-button plain icon="el-icon-plus" size="mini" @click="addSetting(t)" style="padding: 4px 13px;"></el-button>
              </div>
            </el-form-item>


            <el-row v-for="(item,index) in form[t.code]" :key="item.id">
              <el-col :span="3">
                <el-form-item v-if="t['group']">
  
                  <el-select v-model="item.valueArray" placeholder="请选择" style="width:100%" clearable
                             @change="selectKeyChanged($event, item)" >
                    <el-option v-for="(item2) in keys[t.group[0]]"
                               :key="item2.value"
                               :label="item2.name"
                               :value="item2.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <div v-else style="padding-left: 20px;">*</div>
              </el-col>
              <el-col :span="3">
                <el-form-item >
                  <el-input type="text" v-model="item.certRate" placeholder="奖项比例"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item >
                  <el-input type="text" v-model="item.rankNameCn" placeholder="奖项中文名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item >
                  <el-input type="text" v-model="item.rankNameEn" placeholder="奖项英文名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item >
                  <el-select v-model="item.excludeArray" placeholder="请选择" multiple style="width:100%"
                             @change="selectChanged($event, item)" >
                    <el-option v-for="item in certTypeList"
                               :key="item.code"
                               :label="item.name"
                               :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2" v-show="itemChange(item)">
                <el-form-item  label-width="5px">
                  <el-button type="success" icon="el-icon-check" circle size="mini" @click="saveSetting(item)"></el-button>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-form-item label-width="5px">
                  <el-button type="danger" icon="el-icon-delete" circle size="mini"
                             @click="deleteSetting(index, item)"></el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
        <div style="height:40px;"></div>
      </el-col>
    </el-row>
  </div>
</div>

<script>
  let keys ={
    "cnad":{
      "I":"Division I", // {"name":"Division I","value":{"key":"Division","value":"I"}},
      "II":"Division II", // {"name":"Division II","value":{"key":"Division","value":"II"}},
      "III":"Division III", // {"name":"Division III","value":{"key":"Division","value":"III"}},          
    },
    "cnap":{          
      "6":"6 年级",// {"name":"6 年级","value":{"key":"Division","value":"6"}},
      "7":"7 年级",// {"name":"7 年级","value":{"key":"Division","value":"7"}},
      "8":"8 年级",// {"name":"8 年级","value":{"key":"Division","value":"8"}},
    },
    "cant":{},
    "进阶分组":{"分组(6-7年级)":"进阶分组(6-7年级)","分组(8年级)":"进阶分组(8年级)",}
  }
  new Vue({
    el: '#app',
    data: {
      type : "usad",
      certTypeList :[],
      types:[],
      clos :["key","value","certRate","rankNameCn","rankNameEn","exclude"],
      dataTypes:{
        "json-c1" : {
          "type":"c1",
          "rate":[2,3,5],
          "maxRate":[5,10,15],
          "excapt":[]}
      },
      areas :{
        "all":"全国"
      },
      selectedArea:"all",
      form: {
      },
      keys:{}
      
    },
    created: function () {
      
      this.type = DataUtils.get("dataType");
      let dataInfo = DataInfo.getDataInfo(this.type);
      (dataInfo.areas||[]).forEach(t=>{
        this.areas[t] = t;
      })
      let second = DataUtils.get("second");

      let keyInfos = {"进阶分组":keys["进阶分组"],"Division":keys[second]};      
      for(let key in keyInfos){      
        let newItem = {"":{"name":"*", "value":{"key":"", "value":""}}};
        for (let value in keyInfos[key]){        
          let name = keyInfos[key][value];
          newItem[value] = {name,"value":{key,value}}
        }
        this.keys[key] = newItem;
      }
    

      this.selectedArea = DataUtils.get("area") || "all";
      this.getCertType(this.type,()=>{
        this.getSetting()
      });
    },
    computed:{
      itemChange(){
        return (item)=>{
          let _item = item._item;
          let result = true;
          (this.clos||[]).forEach(col=>{
            result &= (item[col]||"") == (_item[col]||"");
          })
          return !result;
        }
      },     
    },
    methods: {
      selectArea(){
        this.getSetting();
      },
      selectChanged(value,item){
        item.exclude = JSON.stringify(value);
      },      
      initItemData(item,isClean=false){
        if (isClean){
          delete item["_item"];
          delete item["valueArray"];
          delete item["excludeArray"];
          return;
        }
        let type = this.type;
        item._item = JSON.parse(JSON.stringify(item));
        item["excludeArray"]=JSON.parse(item["exclude"]||"[]");
        if(item["key"]){
          let v = (this.keys[item["key"]]||{})[item["value"]||""];
          item["valueArray"]=(v||{}).value || "";
        }       
      },
      selectKeyChanged(value,item){
        if (value){
          item.key = value.key;
          item.value = value.value;
        }else{
          item.key ="";
          item.value="";
        }

      },
      getSetting(){
        let type = this.type;
        let _this = this;
        let thisForm = {};
        let area = this.selectedArea;
        let typeArea = (area== "all"?"all":"area");
        this.types = this.certTypeList.filter(ct => ct["area"]==typeArea);
        (this.types||[]).forEach(certType=>{
          if (!thisForm[certType.code]){thisForm[certType.code] = [];}
        })
        $$.list("detail_setting",{type,area},(list)=>{
          (list||[]).forEach(item =>{
            
            if (!thisForm[item.certType]){thisForm[item.certType] = [];}
            thisForm[item.certType].push(item);
            this.initItemData(item);
          });
          _this.form = thisForm;
        })
      },
      getCertType(type,cb){
        let status =1;
        
        $$.list("cert_type",{type,status},(list)=>{
          (list||[]).forEach(item =>{
            if(item["group"]){
              item["group"]=JSON.parse(item["group"]);
            }
          })
          this.certTypeList =list;
          cb && cb();
        },"area,sortIndex")
      },
      back(){
        window.location.href="detail.html";
      },
      addSetting(certType){
        let thisForm = this.form;
        if (!thisForm[certType.code]){thisForm[certType.code] = [];}
        let newItem = {"type":this.type,"area":this.selectedArea,"certType":certType.code,key:"",value:""}
        this.initItemData(newItem);
        this.form[certType.code].push(newItem);
      },
      deleteSetting(index, item){
        if(item.id){
          $$.delete("detail_setting",item.id,(r)=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.form[item.certType].splice(index,1);
          },(r)=>{
            this.$message.error(r.msg || "删除失败!")
          })
        }else{

          this.form[item.certType].splice(index,1);
        }
      },
      saveSetting(item ){

        let dataSave = JSON.parse(JSON.stringify(item))
        this.initItemData(dataSave, true);

        // let data = {};
        // let baseCols = ["id","key","value","type","certType","area"];
        // baseCols.forEach(c=>data[c]=item[c])
        // this.cols.forEach(c=>data[c]=item[c])

        $$.save("detail_setting",dataSave,(r)=>{
          item.id = r.id;
          this.initItemData(item);
          layer.msg("保存成功！");
          // _Setting.loadDetailSetting();

        },(r)=>{
          layer.msg(r.msg || "保存失败!");
        })
      }
    }
  })
</script>

</body>
</html>